<template>
	<view class="pages">
		<view class="header">
			<h-line :height="statusHeight"></h-line>
			<view class="head flex">
				<view class="head_l">
					<u-icon name="arrow-left" size="18" :bold="true" color="#fff" @click="navigateBack()"></u-icon>
				</view>
				<view class="head_r flex" @click="smShow=true">
					<image src="@/static/index/wen.png"></image>
					<text>余额说明</text>
				</view>
			</view>
			<view class="head_m">
				<image class="head_m_i" src="@/static/index/zfb.png"></image>
				<view class="head_m_t">我的余额</view>
				<view class="head_m_c"><text>￥</text>{{Number(blance).toFixed(2)}}</view>
				<view class="head_m_b">每月1、2日为提现时，到账时间2-3工作</view>
			</view>
		</view>
		<view class="section">
			<view class="sec_l flex" @click="navigateTo('/pages-users/my-money/wallet-details')">
				<view class="sec_l_l flex">
					<image src="@/static/index/qb.png"></image>
					<text>明细</text>
				</view>
				<view class="sec_l_r flex">
					<image class="sec_l_r_img" src="@/static/index/right.png"></image>
				</view>
			</view>
			<view class="sec_l flex" style="border-bottom:1rpx solid #F1F1F1;" @click="navigateTo('/pages-users/my-money/wallet-bind/index')">
				<view class="sec_l_l flex">
					<image src="@/static/index/bang.png"></image>
					<text>绑定支付宝</text>
				</view>
				<view class="sec_l_r flex">
					<text>{{phoneDesensitization(phone)}}</text>
					<image class="sec_l_r_img" src="@/static/index/right.png"></image>
				</view>
			</view>
			<view class="sec_btn" @click="toTi">提现</view>
		</view>
		<up-popup mode="bottom" :show="smShow" @close="smShow=false" :round="20">
			<view class="ti_box">
				<view class="ti_box_t">余额说明</view>
				<view class="ti_box_l">1、我的余额=总收入-总提现。</view>
				<view class="ti_box_l">2、当用户下单后，每笔订单的服务金额并不会直接全额到您的账户（我的余额）中展示。需要您在服务一个月后以周期分阶段的形式，平台会在次月3-5日将对应订单的服务金额以周期分阶段的形式打至您的<text>【我的钱包-我的余额】</text>中，以确保您对用户优质服务。（如：用户支付孕产跟踪订单金额为：1000元，总计时长为10个月，则每个月的金额为100元）。 </view>
				<view class="ti_box_l">3、每月可提现的时间1-2日，超过提现日期，则需要下个月发起提现。</view>
				<view class="ti_box_btn" @click="smShow=false">我知道了</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow, onReachBottom, onPageScroll, onReady } from '@dcloudio/uni-app'
	import { showToast, navigateTo, navigateBack, formatDate, phoneDesensitization } from '@/utils'
	import { walletInfo } from '@/api/my'
	const statusHeight = ref(0)
	const smShow = ref(false)
	const blance = ref("")
	const phone = ref('')
	onReady(() => {
		uni.getSystemInfo({
			success: (e) => {
				statusHeight.value = e?.statusBarHeight * 2
			}
		})
	})

	const today = ref(formatDate(new Date(), 'DD'))
	onLoad(async() => {
		const res = await walletInfo({
			current_month_income: 2
		})
		blance.value = res.data.money_balance
		phone.value = res.data.ali_account
	})

	function toTi() {
//		let dd = Number(today.value);
//		if(dd !== 1 && dd != 2) {
//			showToast("当前不在提现日期内")
//		} else {
			navigateTo('/pages-users/my-money/wallet-bind/withdraw')
//		}
	}
</script>
<style scoped lang="scss">
	/*两端分开*/

	.flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	/*上下左右居中*/

	.flex_cen {
		display: flex;
		flex-direction: row;
		/* 子元素横向排列 */
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
	}
	/*一行不同view高度相等*/

	.flex_line {
		display: flex;
		flex-direction: row;
		/* 子元素横向排列 */
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: stretch;
	}
	/*上下分开*/

	.flex_tb {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.header {
		height: 680rpx;
		background: url('@/static/index/qbj.png') no-repeat;
		background-size: 750rpx 680rpx;
		.head {
			box-sizing: border-box;
			padding: 0 24rpx;
			width: 750rpx;
			height: 100rpx;
			.head_l {}
			.head_r {
				image {
					width: 28rpx;
					height: 28rpx;
					position: relative;
					top: 2rpx;
				}
				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 42rpx;
					margin-left: 10rpx;
				}
			}
		}
		.head_m {
			text-align: center;
			.head_m_i {
				width: 100rpx;
				height: 100rpx;
				margin: 30rpx 0;
			}
			.head_m_t {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 45rpx;
				text-align: center;
				font-style: normal;
				margin-top: 20rpx;
			}
			.head_m_c {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 90rpx;
				color: #FFFFFF;
				line-height: 126rpx;
				font-style: normal;
				margin-top: 10rpx;
				text {
					font-size: 50rpx;
				}
			}
			.head_m_b {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #D6FCFB;
				margin-top: 10rpx;
				line-height: 37rpx;
			}
		}
	}

	.section {
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 193, 185, 0.1);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -24rpx;
		.sec_l {
			width: 702rpx;
			height: 120rpx;
			margin: 0 auto;
			.sec_l_l {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #202020;
				line-height: 40rpx;
				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
			.sec_l_r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #202020;
				line-height: 33rpx;
				text-align: right;
				font-style: normal;
				text-transform: none;
				.sec_l_r_img {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.sec_btn {
			width: 380rpx;
			height: 88rpx;
			background: #00C1B9;
			border-radius: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			margin: 150rpx auto;
		}
	}

	.ti_box {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 0 25rpx;
		.ti_box_t {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #202020;
			line-height: 100rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.ti_box_l {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #202020;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-bottom: 40rpx;
			text {
				color: #00BEB4;
			}
		}
		.ti_box_btn {
			width: 400rpx;
			height: 88rpx;
			background: #00C1B9;
			border-radius: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			margin: 20rpx auto;
		}
	}
</style>
